<template>
  <div class="station-popup">
    <div>
      <div class="title">站点信息
        <div class="dot" :style="{background:data.online?'#3afc7b':'#f16565'}"></div>
      </div>
      <div class="block">
        <div class="item">站点ID：{{data.id}}</div>
        <div class="item">站点名称：{{data.name||'--'}}</div>
        <div class="item">经度：{{data.lng||'--'}}</div>
        <div class="item">纬度：{{data.lat||'--'}}</div>
        <div class="item">设备编号：{{data.number||'--'}}</div>
      </div>
      <div v-show="showMore" class="block">
        <div class="item">MAC地址：{{data.mac||'--'}}</div>
        <div class="item">IP地址：{{data.ip||'--'}}</div>
        <div class="item">掩码：{{data.mask||'--'}}</div>
        <div class="item">网关：{{data.gateway||'--'}}</div>
        <div class="item">DNS：{{data.dns||'--'}}</div>
      </div>
      <div class="load-more" @click="onLoadInfoClick">{{loadInfo}}</div>
    </div>
    <div>
      <div class="title">站点管理</div>
      <div class="column" style="margin-right: 20px">
        <div>实时状态
          <el-switch size="small" v-model="panels.realtime" @change="onSwitchChange('realtime')"/>
        </div>
        <!--        <div>历史地震-->
        <!--          <el-switch size="small" v-model="panels.earthquakeEvent" @change="onSwitchChange('earthquakeEvent')"/>-->
        <!--        </div>-->
        <div>特征数据
          <el-switch size="small" v-model="panels.features" @change="onSwitchChange('features')"/>
        </div>
      </div>
      <div class="column">
        <!--        <div>ping站点-->
        <!--          <el-switch size="small" v-model="panels.ping" @change="onSwitchChange('ping')"/>-->
        <!--        </div>-->
        <div>历史地震
          <el-switch size="small" v-model="panels.earthquakeEvent" @change="onSwitchChange('earthquakeEvent')"/>
        </div>
        <el-button size="small" type="primary" style="width: 100%" v-model="panels.restartDevice"
                   @change="onSwitchChange('restartDevice')">重启硬件
        </el-button>
        <!--        <div>更新程序-->
        <!--          <el-switch size="small" v-model="panels.updateDevice" @change="onSwitchChange('updateDevice')"/>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {ref, defineProps, onMounted, computed, nextTick, watch, watchEffect} from 'vue'
  import {map, ReactivePopup} from 'cesium-boost'
  import {panelControl} from "@/variable/PanelControl";

  const props = defineProps({data: {}})
  const data = computed(() => props.data)
  const panels = ref({
    realtime: false,
    earthquakeEvent: false,
    features: false,
    ping: false,
    restartDevice: false,
    updateDevice: false,
  })

  const showMore = ref(false)
  const loadInfo = ref('显示更多...')

  const onLoadInfoClick = () => {
    showMore.value = !showMore.value
    loadInfo.value = showMore.value ? '收起' : '显示更多...'
    nextTick()
      .then(() => {
        let popup = map.popup as ReactivePopup
        popup.refresh()
      })
  }

  function watchCondition(type: string) {
    //@ts-ignore
    let element = panelControl.value[type];
    watch(() => element.show,
      () => {
        //@ts-ignore
        panels.value[type] = element.show && element.id === data.value.id;
      })
  }

  function watchAll() {
    let elements = panelControl.value;
    for (let key in elements) {
      watchCondition(key)
    }
  }

  watchAll()

  //@ts-ignore
  watch(() => props.data.id,
    () => {
      reset()
    })

  const onSwitchChange = (type: string) => {
    //@ts-ignore
    let element = panelControl.value[type];
    //@ts-ignore
    element.show = panels.value[type]
    //@ts-ignore
    element.id = data.value.id
  }

  function reset() {
    let elements = panelControl.value;
    let currentValues = panels.value;
    let value = data.value
    for (let key in elements) {
      //@ts-ignore
      let element = elements[key];
      //@ts-ignore
      currentValues[key] = element.show && element.id === value.id;
    }
  }

  onMounted(() => {
    let popup = map.popup as ReactivePopup
    popup.refresh();
  })
</script>

<style scoped lang="scss">
  @import '@/assets/styles/theme';

  .station-popup {
    padding: 0px 10px 10px 10px;

    .title {
      font-size: 15px;
      margin: 10px 0;
      padding-left: 5px;
      color: #0BECBF;
      border-left: 3px solid #1ad8f1;
      border-bottom: $panel-border-bottom;

      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        margin-left: 5px;
      }
    }

    .item {
      line-height: 30px;
    }

    .column {
      display: inline-block;
      width: calc(50% - 10px);
      line-height: 35px;
    }

    .block {
      display: inline-block;
      margin-right: 20px;
    }

    .load-more {
      color: #08b4d2;
      cursor: pointer;
      text-align: right;
      font-size: 12px;
    }

  }
</style>
